<template>
  <div>
    <el-input
      class="el-input"
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
      v-model="msg"
      clearable
    ></el-input>
    <el-button @click="selectSoft()" type="primary">查询</el-button>
    <div v-show="show">
      <el-tabs @tab-click="handleClick" cs="1">
        <el-tab-pane
          v-for="(item, index) in list"
          :key="index"
          class="aa"
          :label="item.app_type_name"
        >
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="app_name" label="姓名"> </el-table-column>
            <el-table-column prop="app_score" label="评分"> </el-table-column>
            <el-table-column prop="app_size" label="大小"> </el-table-column>
            <el-table-column prop="versions_number" label="版本号">
            </el-table-column>
            <el-table-column prop="app_state" label="状态">
              <template slot-scope="scope">
                <span>{{
                  scope.row.app_state === 2 ? '已下架' : '已上架'
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注"> </el-table-column>
            <el-table-column prop="operate" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="viewDetails(scope.$index, scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 查询展示 -->
    <div v-show="show1">
      <el-table :data="selectList" style="width: 100%">
        <el-table-column prop="app_name" label="姓名"> </el-table-column>
        <el-table-column prop="app_score" label="评分"> </el-table-column>
        <el-table-column prop="app_size" label="大小"> </el-table-column>
        <el-table-column prop="versions_number" label="版本号">
        </el-table-column>
        <el-table-column prop="app_state" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.app_state === 2 ? '已下架' : '已上架' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注"> </el-table-column>
        <el-table-column prop="operate" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="viewDetails(scope.$index, scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      class="dialog"
      title="修改信息"
      :visible.sync="dialogVisible"
      :show-close="false"
      :before-close="handleEdit"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="radio" label="状态">
          <el-radio-group v-model="ruleForm.radio">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="ruleForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="escButton()">取消</el-button>
        <el-button @click="changeUser()" type="primary">修改</el-button>
      </div>
    </el-dialog>
    <!-- 详细信息 -->
    <el-dialog
      class="dialog"
      :visible.sync="hide"
      :show-close="false"
      :before-close="viewDetails"
    >
      <div class="box">
        <div class="left">
          <span class="base">基础信息</span><br /><br />
          <span>应用ID：{{ select.app_id }}</span
          ><br />
          <span>应用名称：{{ select.app_name }}</span
          ><br />
          <span>应用评分：{{ select.app_score }}</span
          ><br />
          <span>应用大小：{{ select.app_size }}</span
          ><br />
          <span
            >应用状态：<span v-if="select.app_state === 1">上架</span>
            <span v-if="select.app_state === 2">下架</span></span
          >
          <br />
          <span>应用标签：{{ select.app_label }}</span
          ><br />
          <span>当前版本号：{{ select.versions_number }}</span
          ><br />
          <span>应用下载次数：{{ select.app_downloding_times }}</span
          ><br />
          <span>处理时间：{{ select.processing_date }}</span
          ><br />
        </div>
        <div class="right"></div>
      </div>
      <div class="box-1">
        <p class="base">应用简介</p>
        <div class="box-1-1">{{ select.app_about }}</div>
      </div>
      <div class="box-1">
        <p class="base">应用详情</p>
        <div class="box-1-1">{{ select.app_presentation }}</div>
      </div>
      <div class="box-1">
        <p class="base">版本特性介绍</p>
        <div class="box-1-1">{{ select.app_edition }}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="escView()">取消</el-button>
        <el-button @click="confirmButton()" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <!-- 分页器 -->
    <el-pagination
      @current-change="changePage"
      v-show="shows"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      background
      layout="prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import http from '../api/index';
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 1,
      shows: true,
      total: 0,
      activeName: '',
      list: [],
      selectList: [],
      msg: '',
      id: '',
      status_id: '',
      app_id: '',
      appId: 1,
      remarks: '',
      show: true,
      show1: false,
      dialogVisible: false,
      hide: false,
      gameList: [],
      tableData: [],
      selectList: [],
      select: {
        app_id: '', //appid
        app_name: '',
        app_score: '',
        app_size: '',
        app_state: '',
        app_label: '',
        versions_number: '',
        app_downloding_times: '',
        processing_date: '',
        app_about: '',
        app_presentation: '',
        app_edition: '', //版本介绍
      },
      ruleForm: {
        radio: '',
        remarks: '',
      },
      rules: {
        radio: [{ required: true, message: '请选择状态', trigger: 'blur' }],
      },
    };
  },
  mounted() {
    http
      .softKinds()
      .then((r) => {
        console.log(r);
        this.list = r;
        for (let i = 0; i < r.length; i++) {
          return r[i];
        }
      })
      .then((res) => {
        http.softGames({ app_type_id: res.app_type_id }).then((result) => {
          console.log(result);
          this.tableData = result.data;
          this.total = parseInt(result.msg);
          console.log(this.tableData);
        });
      });
  },
  watch: {
    msg(val) {
      if (val === '') {
        this.shows = true;
        this.show = true;
        this.show1 = false;

        http
          .softKinds()
          .then((r) => {
            console.log(r);
            this.list = r;
            for (let i = 0; i < r.length; i++) {
              return r[i];
            }
          })
          .then((res) => {
            http.softGames({ app_type_id: res.app_type_id }).then((result) => {
              console.log(result);
              this.tableData = result.data;
              this.total = parseInt(result.msg);
              console.log(this.tableData);
            });
          });
      }
    },
  },
  methods: {
    // 详情
    viewDetails(index, row) {
      this.hide = true;
      console.log(row);
      this.select.app_id = row.app_id;
      this.select.app_name = row.app_name;
      this.select.app_score = row.app_score;
      this.select.app_size = row.app_size;
      this.select.app_state = row.app_state;
      this.select.app_label = row.app_label;
      this.select.versions_number = row.versions_number;
      this.select.app_downloding_times = row.app_downloding_times;
      this.select.processing_date = row.processing_date;
      this.select.app_about = row.app_about;
      this.select.app_presentation = row.app_presentation;
      this.select.app_edition = row.app_edition;
    },
    // 取消查看详情
    escView() {
      this.hide = false;
    },
    // 确定详情
    confirmButton() {
      this.hide = false;
    },
    // 分页
    changePage(val) {
      this.currentPage = val;
      console.log(this.currentPage);
      http
        .softGames({
          app_type_id: this.appId,
          pages: this.currentPage,
        })
        .then((result) => {
          console.log(result);
          this.tableData = result.data;
          this.total = parseInt(result.msg);
          // console.log(this.tableData);
        });
      console.log(this.appId);
    },
    // 模糊查询
    selectSoft() {
      if(this.msg===''){
         alert('输入框不能为空');
      }else{
        this.shows = false;
      this.show = false;
      this.show1 = true;
      http
        .selectOnlineSoft({
          // app_type_id: this.appId,
          app_name: this.msg,
        })
        .then((r) => {
          console.log(r);
          this.selectList = r.data;
        });
      // console.log(this.appId);
      console.log(this.msg);
      }
    },
    handleClick(tab, e) {
      this.appId = this.list[tab.index].app_type_id;
      console.log(tab);
      console.log(this.list[tab.index].app_type_id);

      http
        .softGames({ app_type_id: this.list[tab.index].app_type_id })
        .then((result) => {
          console.log(result);
          this.tableData = result.data;
          this.total = parseInt(result.msg);
          console.log(this.tableData);
        });
    },
    handleEdit(index, row) {
      console.log(row);
      this.status_id = this.ruleForm.radio;
      this.app_id = row.app_id;
      // this.remarks = row.remarks;
      console.log(this.status_id);
      console.log(this.app_id);
      // console.log(this.remarks);
      this.ruleForm.radio = row.app_state;
      // this.ruleForm.remarks = row.remarks;
      this.dialogVisible = true;
    },
    changeUser() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          http
            .changeGameStatus({
              app_id: this.app_id,
              app_state: this.ruleForm.radio,
              remarks: this.remarks,
            })
            .then((r) => {
              console.log(r);
              http
                .softKinds()
                .then((r) => {
                  console.log(r);
                  this.list = r;
                  for (let i = 0; i < r.length; i++) {
                    return r[i];
                  }
                })
                .then((res) => {
                  http
                    .softGames({ app_type_id: res.app_type_id })
                    .then((result) => {
                      console.log(result);
                      this.tableData = result.data;
                      this.total = parseInt(result.msg);
                      console.log(this.tableData);
                    });
                });
              // location.reload();
            });
          console.log(this.ruleForm.radio);
          console.log(this.ruleForm.remarks);
          this.dialogVisible = false;
        }
      });
    },
    escButton() {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
      // this.dialogFormVisible = false;
    },
  },
};
</script>
<style scoped>
.el-input {
  width: 400px;
}
.div1 {
  width: 100%;
  position: sticky;
  top: 100px;
  z-index: 0;
}
.el-card {
  width: 600px;
  margin-left: 86px;
  margin-top: 20px;
}
.base {
  color: rgb(89, 89, 241);
  font-size: 20px;
  margin-top: 16px;
}
.box {
  margin-top: -50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left {
  width: 250px;
  border: 1px solid;
}
.right {
  width: 250px;
  border: 1px solid;
}
.box-1-1 {
  margin-left: 15px;
  width: 100%;
  /* border: 1px solid; */
}
</style>
